<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue中的插槽(slot)</title>
    <script src="../vue.js"></script>
   
</head>
<body>
    <div id="app">
        <body-content>
            <div class ='header' slot='header'>123</div>
            <div class ='footer' slot='footer'>456</div>
        </body-content>           
    </div>   
    
    <script>
        // 
        // 使用场景：
        // 子组件除了展示p标签外，还要展示父组件传递过来的 html内容（dom结构）
        //  但是这个时候会多个div标签
        //采用solt插槽
        Vue.component('body-content',{
            template:`<div>
                        <slot name='header'>456</slot>
                        <div class="content">content</div>
                        <slot name='footer'>798</slot>                
                      </div>`
        })
        
        //  父组件向子组件传递dom  元素
        var root = new Vue({
            el: '#app',            
           
        });

        //  作用域插槽

        
    </script>
</body>
</html>